<template>
	<yb-popup popout="fade" direction="right" :visible.sync="visible" @show="onshow" @hide="onhide">
		<view class="yb-flex yb-flex-1"  :style="{
			'background-color': skinColor.color_bg_1,
			width: (windowWidth / 2) + 'px'
		}">
			<yb-nav-bar
			:title="'共' + whole + unit"
			tabbar
			:options="{
				bgColor: skinColor.color_bg_1,
				color: skinColor.color_1,
				statusBarColor: 'rgba(0,0,0,.5)'
			}"></yb-nav-bar>
			<view class="header padding-gap yb-flex yb-justify-center" :style="{'background-color': skinColor.color_gap_2}">
				<text class="text" :style="{color: skinColor.color_3}">{{title}}</text>
			</view>
			<yb-virtual-list
			ref="list"
			:data="catalog"
			height="90"
			:loading="{
				show: loading,
				color: skinColor.color_1,
				bgColor: skinColor.color_bg_1
			}"
			:empty="{
				show: catalog.length == 0,
				color: skinColor.color_gap_1,
				bgColor: skinColor.color_bg_1
			}">
				<template v-for="(item, index) in catalog" :slot="index">
					<view class="list yb-flex yb-row yb-align-center padding-gap" :style="{'border-color': skinColor.color_gap_2}" @tap="onCatalogClick(item)">
						<text class="text yb-flex-1" :style="{color: record && record.chapter == item.chapter ? skinColor.color_red : skinColor.color_1}">{{item.title}}</text>
						<yb-tap custom-class="icon" stop @click="onDelete(item)" v-if="enableEdit">
							<rd-icon  name="dustbin" :color="skinColor.color_2" size="30"></rd-icon>
						</yb-tap>
						<yb-text :color="skinColor.color_red" custom-class="icon" size="26" value="付费" v-if="item.isPay"></yb-text>
						<rd-icon name="arrow-right" class="icon" :color="skinColor.color_2" size="30" v-if="!item.isPay && !enableEdit"></rd-icon>
					</view>
				</template>
			</yb-virtual-list>
		</view>
	</yb-popup>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			type: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			}
		},
		data () {
			return {
				isShowList: false,
				loading: true,
				visible: false,
				windowWidth: 0
			}
		},
		computed: {
			whole () {
				return this.catalog && this.catalog.filter(ca => ca.chapter).length
			},
			book () {
				return this.$store.getters['reader/getBook']
			},
			record () {
				return this.$store.getters['reader/getRecord']
			},
			unit () {
				return this.type == 'chapter' ? '章节' : '书签'
			},
			enableEdit () {
				return this.type == 'chapter' ? false : true
			},
			catalog () {
				return this.isShowList ? this.type == 'chapter' ? this.chapters : this.mark : []
			},
			chapters () {
				return this.$store.getters['reader/getChapters'].filter(item => item.chapter)
			},
			mark () {
				let index = this.$store.getters['record/get'].findIndex(record => record.id == this.book.id)
				return index > -1 ? this.$store.getters['record/get'][index].mark : []
			}
		},
		methods: {
			onCatalogClick (params) {
				if ( params.isPay ) {
					uni.showToast({
						title: '该章节需要付费或VIP才能阅读',
						icon: 'none'
					})
					return
				}
				this.$emit('itemClick', params)
			},
			onDelete (e) {
				let book = {...this.book}
				let mark = [...this.mark]
				let index = mark.findIndex(item => item.start == e.start)
				if ( index > -1 ) {
					mark.splice(index, 1)
					book.mark = mark
					this.$store.dispatch('record/add', book)
				} else {
					this.$refs.notify.fail('删除书签失败')
				}
			},
			show () {
				this.windowWidth = uni.getSystemInfoSync().windowWidth
				this.$nextTick(function () {
					this.visible = true
				})
			},
			hide () {
				this.visible = false
			},
			onshow () {
				this.$nextTick(function () {
					this.isShowList = true
					this.$nextTick(function () {
						setTimeout(() => {
							if ( this.record ) {
								let index = this.catalog.findIndex(ca => ca.chapter == this.record.chapter)
								if ( index > -1 ) {
									this.$refs.list.scrollToIndex(index)
								}
							}
							this.loading = false
						}, 500)
					})
				})
			},
			onhide () {
				this.isShowList = false
			}
		}
	}
</script>

<style>
	.catalog-wrapper {
		position: absolute;
		right: 0;
		top: 0;
	}
	.header {
		height: 50rpx;
	}
	.header .text {
		font-size: 22rpx;
	}
	.list {
		height: 89rpx;
		border-bottom-width: 1rpx;
	}
	.list .text {
		font-size: 24rpx;
		text-overflow: ellipsis;
		lines: 1;
	}
	.list .icon {
		margin-left: 10rpx;
	}
	.column {
		flex-direction: row;
		align-items: flex-start;
		margin: 10rpx 0;
	}
	.column .cover {
		width: 100rpx;
		height: 165rpx;
		margin-right: 20rpx;
	}
	.column .right {
		flex: 1;
	}
	.column .title {
		font-size: 24rpx;
		flex: 1;
		text-overflow: ellipsis;
		lines: 1;
	}
	.column .hint {
		font-size: 20rpx;
		margin-top: 10rpx;
		flex: 1;
		text-overflow: ellipsis;
		lines: 1;
	}
	.column .desc {
		font-size: 22rpx;
		margin-top: 10rpx;
		flex: 1;
		text-overflow: ellipsis;
		lines: 4;
	}
</style>
